/* From Uiverse.io by zanina-yassine */
/*https://uiverse.io/zanina-yassine/neat-starfish-50*/
.card {
  width: 700px;
  height: 235px;
  position: relative;
  padding: 25px;
  margin-bottom: 30px;
  background: radial-gradient(
        178.94% 106.41% at 26.42% 106.41%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 71.88%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    #ffffff;
  box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01),
    0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09),
    0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 23px;
  transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
}

.card:hover {
  transform: scale(1.05);
}

.card a {
  text-decoration: none; /* 去掉链接的下划线 */
}

.container {
  width: 260px;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
}
.container img {
  width: 100%;
  border-radius: 23px;
}
@media only screen and (max-width: 640px) {
  .container {
    width: auto;
    top: 30px;
  }
  .container img {
    width: 150px;
    border-radius: 8px;
  }
}

.sunshine {
  animation: sunshines 2s infinite;
}

@keyframes sunshines {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes clouds {
  0% {
    transform: translateX(15px);
  }

  50% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(15px);
  }
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-header span:first-child {
  word-break: break-all;
  font-weight: 800;
  font-size: 0.84em;
  line-height: 135%;
  color: rgba(87, 77, 51, 0.66);
  max-width: 320px;
  min-height: 120px;
}

.card-header span:last-child {
  font-weight: 700;
  font-size: 15px;
  line-height: 135%;
  color: rgba(87, 77, 51, 0.33);
}

.temp {
  position: absolute;
  left: 25px;
  bottom: 12px;
  font-weight: 700;
  font-size: 64px;
  line-height: 77px;
  color: rgba(87, 77, 51, 1);
}

.card-container .entry-header {
  text-align: center;
}
